import 'package:flutter/material.dart';

void main() {
  runApp(AnimationDemoApp());
}

class AnimationDemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 动画示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: AnimationDemoHome(),
    );
  }
}

class AnimationDemoHome extends StatefulWidget {
  @override
  _AnimationDemoHomeState createState() => _AnimationDemoHomeState();
}

class _AnimationDemoHomeState extends State<AnimationDemoHome>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;
  late Animation<Color?> _colorAnimation;
  late Animation<double> _sizeAnimation;
  late Animation<double> _rotationAnimation;
  late Animation<Offset> _slideAnimation;

  @override
  void initState() {
    super.initState();

    // 创建动画控制器
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );

    // 创建各种动画
    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    );

    // 颜色动画
    _colorAnimation = ColorTween(
      begin: Colors.blue,
      end: Colors.red,
    ).animate(_animation);

    // 大小动画
    _sizeAnimation = Tween<double>(
      begin: 100.0,
      end: 200.0,
    ).animate(_animation);

    // 旋转动画
    _rotationAnimation = Tween<double>(
      begin: 0.0,
      end: 2 * 3.14159, // 360度
    ).animate(_animation);

    // 滑动动画
    _slideAnimation = Tween<Offset>(
      begin: Offset(-1.0, 0.0),
      end: Offset(1.0, 0.0),
    ).animate(_animation);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 动画示例'),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              // 1. 基础动画示例
              _buildSectionTitle('1. 基础动画'),
              _BasicAnimationDemo(controller: _controller),

              SizedBox(height: 20),

              // 2. 颜色渐变动画
              _buildSectionTitle('2. 颜色动画'),
              AnimatedBuilder(
                animation: _colorAnimation,
                builder: (context, child) {
                  return Container(
                    width: 150,
                    height: 150,
                    decoration: BoxDecoration(
                      color: _colorAnimation.value,
                      borderRadius: BorderRadius.circular(20),
                    ),
                    child: Center(
                      child: Text(
                        '颜色变化',
                        style: TextStyle(color: Colors.white, fontSize: 18),
                      ),
                    ),
                  );
                },
              ),

              SizedBox(height: 20),

              // 3. 大小变化动画
              _buildSectionTitle('3. 大小动画'),
              AnimatedBuilder(
                animation: _sizeAnimation,
                builder: (context, child) {
                  return Container(
                    width: _sizeAnimation.value,
                    height: _sizeAnimation.value,
                    color: Colors.green,
                    child: Center(
                      child: Text(
                        '大小变化',
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  );
                },
              ),

              SizedBox(height: 20),

              // 4. 旋转动画
              _buildSectionTitle('4. 旋转动画'),
              AnimatedBuilder(
                animation: _rotationAnimation,
                builder: (context, child) {
                  return Transform.rotate(
                    angle: _rotationAnimation.value,
                    child: Container(
                      width: 100,
                      height: 100,
                      color: Colors.orange,
                      child: Center(
                        child: Text('旋转'),
                      ),
                    ),
                  );
                },
              ),

              SizedBox(height: 20),

              // 5. 滑动动画
              _buildSectionTitle('5. 滑动动画'),
              SlideTransition(
                position: _slideAnimation,
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.purple,
                  child: Center(
                    child: Text(
                      '滑动',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ),

              SizedBox(height: 20),

              // 6. 组合动画
              _buildSectionTitle('6. 组合动画'),
              _CombinedAnimationDemo(),

              SizedBox(height: 20),

              // 7. 隐式动画
              _buildSectionTitle('7. 隐式动画'),
              _ImplicitAnimationDemo(),

              SizedBox(height: 20),

              // 8. Hero 动画
              _buildSectionTitle('8. Hero 动画'),
              _HeroAnimationDemo(),

              SizedBox(height: 20),

              // 控制按钮
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ElevatedButton(
                    onPressed: () {
                      _controller.forward();
                    },
                    child: Text('开始动画'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      _controller.reverse();
                    },
                    child: Text('反向动画'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      _controller.repeat(reverse: true);
                    },
                    child: Text('重复动画'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      _controller.stop();
                    },
                    child: Text('停止动画'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildSectionTitle(String title) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.symmetric(vertical: 8),
      child: Text(
        title,
        style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
      ),
    );
  }
}

// 基础动画示例
class _BasicAnimationDemo extends StatefulWidget {
  final AnimationController controller;

  const _BasicAnimationDemo({Key? key, required this.controller}) : super(key: key);

  @override
  __BasicAnimationDemoState createState() => __BasicAnimationDemoState();
}

class __BasicAnimationDemoState extends State<_BasicAnimationDemo>
    with SingleTickerProviderStateMixin {
  late Animation<double> animation;

  @override
  void initState() {
    super.initState();
    animation = Tween<double>(
      begin: 0.0,
      end: 1.0,
    ).animate(CurvedAnimation(
      parent: widget.controller,
      curve: Curves.bounceOut,
    ));
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: animation,
      builder: (context, child) {
        return Container(
          width: 100 + (animation.value * 100),
          height: 100 + (animation.value * 100),
          decoration: BoxDecoration(
            color: Colors.blue.withOpacity(0.5 + animation.value * 0.5),
            borderRadius: BorderRadius.circular(animation.value * 50),
          ),
        );
      },
    );
  }
}

// 组合动画示例
class _CombinedAnimationDemo extends StatefulWidget {
  @override
  __CombinedAnimationDemoState createState() => __CombinedAnimationDemoState();
}

class __CombinedAnimationDemoState extends State<_CombinedAnimationDemo>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _scaleAnimation;
  late Animation<double> _opacityAnimation;
  late Animation<Color?> _colorAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(milliseconds: 1500),
      vsync: this,
    );

    _scaleAnimation = Tween<double>(
      begin: 0.0,
      end: 1.0,
    ).animate(CurvedAnimation(
      parent: _controller,
      curve: Interval(0.0, 0.7, curve: Curves.elasticOut),
    ));

    _opacityAnimation = Tween<double>(
      begin: 0.0,
      end: 1.0,
    ).animate(CurvedAnimation(
      parent: _controller,
      curve: Interval(0.3, 1.0, curve: Curves.easeIn),
    ));

    _colorAnimation = ColorTween(
      begin: Colors.grey,
      end: Colors.deepPurple,
    ).animate(CurvedAnimation(
      parent: _controller,
      curve: Interval(0.0, 1.0, curve: Curves.linear),
    ));
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            return Transform.scale(
              scale: _scaleAnimation.value,
              child: Opacity(
                opacity: _opacityAnimation.value,
                child: Container(
                  width: 120,
                  height: 120,
                  decoration: BoxDecoration(
                    color: _colorAnimation.value,
                    borderRadius: BorderRadius.circular(60),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black26,
                        blurRadius: 10,
                        offset: Offset(0, 5),
                      )
                    ],
                  ),
                  child: Center(
                    child: Text(
                      '组合\n动画',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
            );
          },
        ),
        ElevatedButton(
          onPressed: () {
            if (_controller.isCompleted) {
              _controller.reverse();
            } else {
              _controller.forward();
            }
          },
          child: Text('播放组合动画'),
        ),
      ],
    );
  }
}

// 隐式动画示例
class _ImplicitAnimationDemo extends StatefulWidget {
  @override
  __ImplicitAnimationDemoState createState() => __ImplicitAnimationDemoState();
}

class __ImplicitAnimationDemoState extends State<_ImplicitAnimationDemo> {
  bool _isExpanded = false;
  double _width = 100;
  Color _color = Colors.blue;
  BorderRadius _borderRadius = BorderRadius.circular(10);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AnimatedContainer(
          duration: Duration(milliseconds: 500),
          curve: Curves.easeInOut,
          width: _width,
          height: _width,
          decoration: BoxDecoration(
            color: _color,
            borderRadius: _borderRadius,
          ),
          child: Center(
            child: Text(
              '隐式动画',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
        SizedBox(height: 10),
        Wrap(
          spacing: 8,
          children: [
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _width = _width == 100 ? 200 : 100;
                });
              },
              child: Text('改变大小'),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _color = _color == Colors.blue ? Colors.red : Colors.blue;
                });
              },
              child: Text('改变颜色'),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _borderRadius = _borderRadius == BorderRadius.circular(10)
                      ? BorderRadius.circular(50)
                      : BorderRadius.circular(10);
                });
              },
              child: Text('改变形状'),
            ),
          ],
        ),
      ],
    );
  }
}

// Hero 动画示例
class _HeroAnimationDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => _HeroDetailPage(),
          ),
        );
      },
      child: Hero(
        tag: 'hero-image',
        child: Container(
          width: 100,
          height: 100,
          color: Colors.teal,
          child: Center(
            child: Text(
              '点击\n查看\nHero动画',
              textAlign: TextAlign.center,
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

class _HeroDetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hero 动画详情'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Hero(
              tag: 'hero-image',
              child: Container(
                width: 200,
                height: 200,
                color: Colors.teal,
                child: Center(
                  child: Text(
                    'Hero动画\n详情页',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 24,
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(height: 20),
            Text('点击返回查看动画效果'),
          ],
        ),
      ),
    );
  }
}
